<template>
  <el-container>
      <el-aside>
          <div style="text-align: center;">
              <el-row class="tac">
                  <el-col :span="12">
                    <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo"
                      @open="handleOpen"
                      @close="handleClose">
                      <el-menu-item index="1" @click="turnhome">
                        <i class="el-icon-location"></i>
                        <span slot="title">个人主页</span>
                      </el-menu-item>
                      <el-menu-item index="2" @click="turnportal">
                        <i class="el-icon-location"></i>
                        <span slot="title">个人门户</span>
                      </el-menu-item>
                      <el-menu-item index="3" @click="turnsearch">
                        <i class="el-icon-location"></i>
                        <span slot="title">搜索文献</span>
                      </el-menu-item>
                    </el-menu>
                  </el-col>     
              </el-row>
          </div>
      </el-aside>
      <el-main>
          <div style="position: relative;width: 1000px;height: 750px;">
            <div>
              <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/Mainpage' }">个人主页</el-breadcrumb-item>
                <el-breadcrumb-item>{{portalname}}的门户</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div style="text-align: center;">
              <el-avatar :size="200" :src="imgurl" shape="circle" alt="暂无头像" ></el-avatar>
              <br>
              <h1>{{portalname}}</h1>
            </div>
            <div style="position: absolute;top: 13%;right: 26%;">
              <el-button type="primary" icon="el-icon-picture-outline-round" round size="medium" v-if="ifmyself" @click="changeavatar">修改头像</el-button>
            </div>
            <div>
              <el-dialog
                title="更换头像"
                :visible.sync="dialog"
                width="30%"
                :before-close="dialogClose">
                <div style="text-align: center;">
                  <el-upload
                    class="avatar-uploader"
                    action="/"
                    :http-request="httpRequest"
                    :show-file-list="true"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imgurl" :src="imgurl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
                <br>
                <div style="text-align: center;">
                  <el-button type="info" @click="canceledit_img">取 消</el-button>
                  <el-button type="success" @click="saveedit_img">保 存</el-button>
                </div>
              </el-dialog>
            </div>
            <div style="position: absolute;top:32%;right: 25%;">
              <el-button type="primary" icon="el-icon-edit" round size="medium" v-if="ifmyself" @click="editinfo">修改个人简介</el-button>
            </div>
            <div>
              <el-drawer
                :visible.sync="drawer"
                :direction="direction"
                :before-close="drawerClose"
                size="28%">
                &nbsp;
                <div style="position: relative;text-align: center;">
                  <h3>个人简介</h3>
                  <el-input 
                    type="textarea" 
                    v-model="introduction"
                    placeholder="请输入内容"
                    :autosize="{ minRows: 5, maxRows: 10}">
                    </el-input>
                </div>
                <div style="text-align: center;position: absolute;top: 350px;left: 120px;">
                  <el-button type="info" @click="canceledit_intro">取 消</el-button>
                  <el-button type="success" @click="saveedit_intro">保 存</el-button>
              </div>
              </el-drawer>
            </div>
            <div style="width: 500px;height: 400px;position: absolute;top: 50%;left: 50%;margin-top:-75px;
            margin-left:-262px;">
              <el-card class="box-card" style="border-radius: 30px;">
                <h1>个人简介</h1>
                <el-divider></el-divider>
                <h3>{{introduction}}</h3>
               
              </el-card>
            </div>
          </div>
          <div style="height: 50px;">
            <el-divider></el-divider>
          </div>
          <div  style="position: relative;width: 1000px;height:650px;">
              <div class="icon-size"><i class="el-icon-location"></i>&nbsp;{{portalname}}的论文</div>
              <div style="width:1000px;margin:0 auto;">
                <el-table
                  :data="currentpaper"
                  height="460"
                  style="width: 100%"
                  :row-style="{height:'40px'}"
                  :cell-style="{padding:'0px'}">
                  <el-table-column
                    prop="paperid"
                    label="论文编号"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="papername"
                    label="文献标题"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="paperauthor"
                    label="文献作者"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="papertime"
                    label="发表时间"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
                      <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deletepaper(scope.row)"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div class="block" style="text-align: center;position: absolute;top:50%;left:50%;margin-top: 200px;margin-left: -150px;">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="papertotal"
                  pager-count="5"
                  page-sizes="10"
                  :current-page="currentpage"
                  @current-change="changepage"
                >
                </el-pagination>
              </div>
          </div>
          
      </el-main>
  </el-container>
</template>

<script>
export default {
  created(){
    //1.先把浏览器里存的信息填进数据
    this.userid=sessionStorage.getItem("userid");
    this.portalid=sessionStorage.getItem("portalid");
    //2.根据userid和portalid是否匹配决定页面样式
    //3.根据portalid确定ifget
    //4.根据portalid，要来对应的portalname、imgurl、introduction、paperForm和papertotal
    //5.初始化页面
    this.change_current_paper(1);
  },
  data(){
      return{
          
          userid:'',   //当前浏览器里保存的用户id
          portalid:'', //现在点进来的门户的id
          portalname:'施东成',//门户主人的姓名
          imgurl:require('../assets/imgs/tks.png'),//头像的路径
          imgurl_before:'',//修改前的头像
          introduction:'  施东成是我国著名文史学家，担任南京文史馆馆长。',//个人简介
          introduction_before:'',//修改前的个人简介
          ifget:true,  //是否认领了门户，true是，false否
          ifmyself:true,//访问门户的是不是本人，true是，false否
          drawer:false,//是否打开抽屉
          dialog:false,//是否打开弹窗
          direction:'rtl',//抽屉方向
          papertotal:21,
          currentpage:1,
          currentpaper:[
            {
              paperid: '',//论文编号
              papername: '',//论文标题
              paperauthor: '',//论文作者
              papertime: '',//论文发表时间
            }
          ],
          paperForm: [//论文表单
            {
              paperid: '1',//论文编号
              papername: '论文1',//论文标题
              paperauthor: '作者1',//论文作者
              papertime: '2001',//论文发表时间
            },
            {
              paperid: '2',//论文编号
              papername: '论文2',//论文标题
              paperauthor: '作者2',//论文作者
              papertime: '2002',//论文发表时间
            },
            {
              paperid: '3',//论文编号
              papername: '论文3',//论文标题
              paperauthor: '作者3',//论文作者
              papertime: '2003',//论文发表时间
            },
            {
              paperid: '4',//论文编号
              papername: '论文4',//论文标题
              paperauthor: '作者4',//论文作者
              papertime: '2004',//论文发表时间
            },
            {
              paperid: '5',//论文编号
              papername: '论文5',//论文标题
              paperauthor: '作者5',//论文作者
              papertime: '2005',//论文发表时间
            },
            {
              paperid: '6',//论文编号
              papername: '论文6',//论文标题
              paperauthor: '作者6',//论文作者
              papertime: '2006',//论文发表时间
            },
            {
              paperid: '7',//论文编号
              papername: '论文7',//论文标题
              paperauthor: '作者7',//论文作者
              papertime: '2007',//论文发表时间
            },
            {
              paperid: '8',//论文编号
              papername: '论文8',//论文标题
              paperauthor: '作者8',//论文作者
              papertime: '2008',//论文发表时间
            },
            {
              paperid: '9',//论文编号
              papername: '论文9',//论文标题
              paperauthor: '作者9',//论文作者
              papertime: '2009',//论文发表时间
            },
            {
              paperid: '10',//论文编号
              papername: '论文10',//论文标题
              paperauthor: '作者10',//论文作者
              papertime: '2010',//论文发表时间
            },
            {
              paperid: '11',//论文编号
              papername: '论文11',//论文标题
              paperauthor: '作者11',//论文作者
              papertime: '2011',//论文发表时间
            },
            {
              paperid: '12',//论文编号
              papername: '论文12',//论文标题
              paperauthor: '作者12',//论文作者
              papertime: '2012',//论文发表时间
            },
            {
              paperid: '13',//论文编号
              papername: '论文13',//论文标题
              paperauthor: '作者13',//论文作者
              papertime: '2013',//论文发表时间
            },
            {
              paperid: '14',//论文编号
              papername: '论文14',//论文标题
              paperauthor: '作者14',//论文作者
              papertime: '2014',//论文发表时间
            },
            {
              paperid: '15',//论文编号
              papername: '论文15',//论文标题
              paperauthor: '作者15',//论文作者
              papertime: '2015',//论文发表时间
            },
            {
              paperid: '16',//论文编号
              papername: '论文16',//论文标题
              paperauthor: '作者16',//论文作者
              papertime: '2016',//论文发表时间
            },
            {
              paperid: '17',//论文编号
              papername: '论文17',//论文标题
              paperauthor: '作者17',//论文作者
              papertime: '2017',//论文发表时间
            },
            {
              paperid: '18',//论文编号
              papername: '论文18',//论文标题
              paperauthor: '作者18',//论文作者
              papertime: '2018',//论文发表时间
            },
            {
              paperid: '19',//论文编号
              papername: '论文19',//论文标题
              paperauthor: '作者19',//论文作者
              papertime: '2019',//论文发表时间
            },
            {
              paperid: '20',//论文编号
              papername: '论文20',//论文标题
              paperauthor: '作者20',//论文作者
              papertime: '2020',//论文发表时间
            },
            {
              paperid: '21',//论文编号
              papername: '论文21',//论文标题
              paperauthor: '作者21',//论文作者
              papertime: '2021',//论文发表时间
            },

          ]
      };
  },
methods: {
    async login() {
        if (this.loginForm.username === '' || this.loginForm.password === '') {
          this.$message.error('账号或密码不能为空');
        }
        else {
          const { data: res } = await this.$http.post("/login", this.loginForm);//这里传数据需要注意，把userid、email也传进去了
          if (!res.success) return this.$message.error('登录失败');

          this.$message.success('登录成功');
          this.loginForm.userid = res.message.userid;
          this.loginForm.email = res.message.email;
          sessionStorage.setItem('userInfo', JSON.stringify(this.loginForm));					
          this.$router.push('/manage');
        }
    },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    },
    turnhome(){
      this.$router.push('/Mainpage');
    },
    turnsearch(){
      this.$router.push('/Search');
    },
    turnportal(){
      this.$router.push('/Portal');
    },
    changepage(val){
      this.currentpage=val;
      this.change_current_paper(this.currentpage);
    },
    change_current_paper(val){//在某一页时，currentpaper里的内容换到当前页对应的
      this.currentpaper=[];
      if(val==1){
        if(this.papertotal<=10){
          
          for(var i=0;i<this.papertotal;i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a)
          }
        }else{
          
          for(var i=0;i<10;i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a);
          }
        }
      }else{
        var paperremain;
        paperremain=this.papertotal-10*(val-1);
        if(this.paperremain<=10){
        
          var j=10*(val-1);
          for(var i=j;i<(j+paperremain);i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a);
          }
        }else{
          var j=10*(val-1);
          for(var i=j;i<j+10;i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a);
          }
        }
      }
    },
    editinfo(){
      this.drawer=true;
      this.introduction_before=this.introduction;
    },
    drawerClose(done){
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    dialogClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    canceledit_intro(){
      this.introduction=this.introduction_before;
      this.drawer=false;
    },
    saveedit_intro(){
      alert("已保存!");
      //向后端传修改后的个人简介
      this.drawer=false;
    },
    turnpaper(row){
      //row.paperid可以得到点击的论文的id，根据这个跳转
      //this.$router.push('/Paper');
    },
    deletepaper(row){
      var pid=row.paperid;
      console.log(pid);
      var i=0,j=0;
      for(i=0;i<this.paperForm.length;i++){
        if(this.paperForm[i].paperid==pid){
          for(j=i+1;j<this.paperForm.length;j++){
            this.paperForm[j-1]=this.paperForm[j];
          }
          this.paperForm.pop();
          this.papertotal--;
          this.change_current_paper(this.currentpage);
          //根据this.paperid和this.portalid，后端将此文章在该门户删除
        }
      }
    },
    changeavatar(){
      this.dialog=true;
      this.imgurl_before=this.imgurl;
    },
    canceledit_img(){
      this.imgurl=this.imgurl_before;
      this.dialog=false;
    },
    saveedit_img(){
      alert("已保存!");
      //向后端传修改后的头像
      this.dialog=false;
    },
    handleAvatarSuccess(res, file) {
        this.imgurl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    },
    httpRequest(file){//把图片传回后端
      var fd = new FormData() //构造一个 FormData，把后台需要发送的参数都添加进去
        fd.append('multipartFile', file.file) //传文件
        this.$axios
          .post('接口URL', fd)
          .then((response) => {
            console.log(response)
            }
          )

    },

  }
};
</script>

<style>
  .box-card {
    width: 500px;
    height: 400px;
    padding: 15px;
    text-align: center;
  }
  .icon-size {
    font-size: 20px;
  }
  .el-breadcrumb{
    font-size: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
